<template>
  <div class="shareBox">
    <FloatCard v-show="isShowCard" @closeCard="clickCloce">
      <template slot="title">
        <span v-if="isEmail">电邮<b> (将本内容以PDF的形式分享至对方邮箱)</b></span>
        <span v-else>分享<b> (复制本内容的链接进行分享)</b></span>
      </template>
      <template slot="input">
        <el-input
          v-if="isEmail"
          class="input-with-select"
          v-model="toEmail"
          placeholder="请输入对方邮箱"
        >
          <el-button slot="append" @click="affirmSend">确认</el-button>
        </el-input>
        <el-input
          v-else
          class="input-with-select"
          v-model="thisContentUrl"
          id="copyInput"
          readonly
        >
          <el-button slot="append" @click="clickCopy">复制</el-button>
        </el-input>
      </template>
    </FloatCard>
  </div>
</template>

<script>
import FloatCard from "./floatCard.vue";
export default {
    name: "shareBox",
    components: { FloatCard },
    props: {
        // 判断当前是否是电邮 默认是分享false
        isEmail: {
            type: Boolean,
            default: false,
        },
        // 发送的邮件地址
        toEmail:{
            type: String,
            default: ''
        },
        // 分享的地址
        thisContentUrl:{
            type: String,
        },
        // 悬浮窗显示隐藏
        isShowCard:{
            type: Boolean,
            default: false,
        },
    },
    data(){
        return{
            // isShowCard: false,// 悬浮窗显示隐藏
        }
    },
    methods:{
        //电邮分享点击关闭按钮
        clickCloce() {
            this.$emit('update:isShowCard',false);
        },
        
        //**************************分享***********************
        //点击复制
        async clickCopy() {
            let copyVal = document.getElementById("copyInput");
            // console.log(copyVal);
            copyVal.select();
            document.execCommand("Copy");
            this.$message({
                message: "复制成功",
                type: "success",
            });
        },
        //**************************分享***********************end
    },
}
</script>

<style scoped>
.shareBox >>> .box-card{
  width: 100%;
  left: 0%;
  top: 100%;
}
::v-deep .input-with-select.el-input.is-disabled .el-input__inner {
  color: #333;
  cursor: text;
}
</style>